<template>
	<view class="content">
		<view class="logo">
			<image src="https://jihe2.oss-cn-beijing.aliyuncs.com/xinli/login/logo.png" mode=""></image>
		</view>
		
		<!--  #ifndef MP-QQ  -->
			<view class="uni-form-item uni-column">
				<input type="tel" class="uni-input" v-model="user" name="" placeholder="请输入手机号" />
			</view>
			<view class="uni-form-item uni-column">
				<input type="password" class="uni-input" v-model="pwd" name="" placeholder="请输入密码" />
			</view>
			<button class="tui-btn" @click="loginBtn" >登陆</button>
			<view class="links">
				<view @tap="gotoForgetPassword">忘记密码？</view>
				<view>|</view>
				<view class="link-highlight" @tap="gotoRegistration">注册账号</view>
			</view>
		<!--  #endif -->  
		<!--  #ifdef MP-QQ  -->
			<button class="tui-btn" type="default" open-type="getUserInfo" @getphonenumber="decryptPhoneNumber" @getuserinfo="decryptUserinfo"> qq快速登录 </button>
			<yonghu-tags ref="yonghuTagRef" ></yonghu-tags>
		<!--  #endif --> 
		<!-- 其他登录方式   
		<view class="otherLoginTitle">———其他登录方式———</view>
		<view class="otherLogin">    
			<view class="weiixnLogin" @click="weixinlogin">
				<image src="../../static/weixin.png" mode=""></image>
			</view>
			<button class="qqLogin" type="default" open-type="getUserInfo" @getuserinfo="decryptUserinfo" @click="qqlogin">
				<image src="../../static/QQ.png" mode=""></image>
				qq
			</button>
			<view class="weiboLogin" @click="weibologin">
				<image src="../../static/weibo.png" mode=""></image>
			</view>
		</view>   -->
		
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import yonghuTags from '@/components/xinliziliao/yonghuTags'
	export default {
		components: {
			yonghuTags,
		},
		data() {
			return {
				user: '',
				data: null,
				pwd: '',
				type : 1,
				userInfo : {}
			}
		},
		computed: {
			...mapState({
				isLogin: state => state.isLogin,
				isSDKReady: state => state.isSDKReady
			})
		},
		onShow() {
		},
		onLoad() {
			// #ifndef H5
			uni.showShareMenu({
				showShareItems : ['qq', 'qzone', 'wechatFriends', 'wechatMoment']	
			});
			// #endif
			
			let userInfo = uni.getStorageSync('userInfo');
			this.userInfo = userInfo;
			this.user = userInfo.userId;
			this.pwd = userInfo.userPassword;
			
			// #ifdef MP-QQ
			//录音开始事件
			if( !userInfo ){
				this.type = 2;
			}else{
				
			}
			// #endif
		},
		methods: {
			// qq登录
			qqlogin(){
				var _that = this
				uni.login({
				  provider: 'qq',
				  success: function (loginRes) {
					  console.log(loginRes);
					  
					  uni.getUserInfo({
					    provider: 'qq',
					    success: function (infoRes) {
							console.log(infoRes)
							_that.loginImage = infoRes.userInfo.figureurl_qq_2
					    }
					  });
				  }
				});
			},
			decryptPhoneNumber(e){
				console.log(e);
			},
			async decryptUserinfo(e){
				
				let  userInfo =  e.detail.userInfo;
				
				let login = await this.$apiW.qqLogin({ code : userInfo.avatarUrl });
				
				// 有qq绑定过了。
				if( login.data ){
					uni.setStorageSync('userInfo',login.data);
					// 
					uni.reLaunch({
						url: '/pages/index/index'
					})
					return;
				}
				
				// 改写直接注册。
				userInfo.userId = userInfo.avatarUrl;
				userInfo.img = userInfo.avatarUrl;
				userInfo.code = userInfo.avatarUrl;
				//
				userInfo.user = userInfo.nickName;
				userInfo.invitationcode = userInfo.country;
				//
				userInfo.yonghuBiaoQian = this.$refs.yonghuTagRef.getClickTags();
				userInfo.type = 1;
				userInfo.passWord = 123;
				
				// 注册.
				if( userInfo.yonghuBiaoQian.length > 0 ){
					this.$api.qqUserRegister(userInfo).then(res => {
						uni.setStorageSync('userInfo', res.data);
						uni.showToast({
							title: '游客登录默认密码为'+123,
							icon: "none"
						});
						
						uni.reLaunch({
							url: '/pages/index/index'
						})
					})
				}else{
					uni.showToast({
						title: '请选择标签',
						icon: "none"
					});
				}
			},
			gotoRegistration() {
				uni.navigateTo({
					url: 'registration'
				});
			},
			gotoForgetPassword() {
				// uni.showToast({
				// 	title: '详情功能尚未完善~',
				// 	icon: "none"
				// });
				uni.navigateTo({url: 'forget-password'});
			},
			async loginBtn() {
				if (this.user && this.pwd) { //获取user的userId,实际接口为后端返回（user基础信息+userSig）
					const data = {
						userId: this.user,
						passWord: this.pwd
					}
					let userInfo = await this.$api.userLogin(data);
					userInfo = userInfo.data;
					if (userInfo) { //根据返回的userID 以及 userSig 登录tim
						uni.setStorageSync('userInfo', userInfo);
						// 登录状态
						console.log('userInfo',userInfo);
						
						let promise = this.tim.login({
							userID: userInfo.userId,
							userSig: userInfo.userSig
						});
						promise.then((res) => {
							//登录成功后 更新登录状态
							this.$store.commit("toggleIsLogin", true);
							//自己平台的用户基础信息
							//tim 返回的用户信息
							uni.setStorageSync('userTIMInfo', res.data)
						}).catch((err) => {
							console.warn('login error:', err); // 登录失败的相关信息
						});
						
						uni.reLaunch({
							url: '/pages/index/index'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '用户不存在',
							duration: 1500
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请将账户密码输入完整',
						duration: 1500
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	$color-primary: #b49950;

	.tui-btn {
		background-color: #df5451;
		color: #fff;
	}

	.content {
		padding: 100upx;
	}

	.logo {
		text-align: center;

		image {
			height: 200upx;
			width: 200upx;
			margin: 0 0 60upx;
		}
	}

	.uni-form-item {
		margin-bottom: 40upx;
		padding: 0;
		border-bottom: 1px solid #e3e3e3;

		.uni-input {
			font-size: 30upx;
			padding: 7px 0;
		}
	}

	button[type="primary"] {
		background-color: $color-primary;
		border-radius: 0;
		font-size: 34upx;
		margin-top: 60upx;
	}

	.links {
		text-align: center;
		margin-top: 40upx;
		font-size: 26upx;
		color: #999;

		view {
			display: inline-block;
			vertical-align: top;
			margin: 0 10upx;
		}

		.link-highlight {
			color: $color-primary
		}
	}
	
	page {
		height: 100%;
	}
	
	.main {
		background: #FDE23D;
		width: 100%;
		height: 100%;
	}
	
	.mainHead {
		height: var(--status-bar-height);
	}
	
	.loginTop {
		width: 700upx;
		margin: 0 auto;
		height: 40upx;
		line-height: 40upx;
		display: flex;
		justify-content: space-between;
		font-size: 30upx;
		margin-top: 10upx;
	}
	
	.loginTopBack {
		width: 35upx;
		height: 35upx;
	}
	
	.loginUp {
		width: 100upx;
		height: 100upx;
		margin: 0 auto;
		padding: 15upx;
		border: 1upx solid #333333;
		border-radius: 60upx;
		margin-top: 60upx;
		background: #333333;
	}
	
</style>
